<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">登陆</h3>
  </div>
  <div class="panel-body">
    <form #form="ngForm" (ngSubmit)="form.form.valid && doLogin()" novalidate class="form-horizontal" role="form">
      <div class="form-group" [ngClass]="{ 'has-error': form.submitted && !userName.valid }">
        <label class="col-sm-2 control-label">用户名：</label>
        <div class="col-sm-10">
          <input required [(ngModel)]="user.userName" class="form-control" type="text" name="userName" #userName="ngModel">
          <div *ngIf="form.submitted && !userName.valid" class="text-danger">用户名必须输入！</div>
        </div>
      </div>

      <div class="form-group" [ngClass]="{ 'has-error': form.submitted && !password.valid }">
        <label class="col-sm-2 control-label">密码:</label>
        <div class="col-sm-10">
          <input required minlength="8" [(ngModel)]="user.password" class="form-control" type="password" name="passwoed" #password="ngModel">
           <div *ngIf="form.submitted && !password.valid" class="text-danger">密码必须输入,至少要8位！</div>
        </div>
      </div>
      <div *ngIf="error" class="col-sm-offset-2 col-sm-10 alert alert-danger">{{error}}</div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" class="btn btn-success">登录</button>
          <button type="button" class="btn btn-danger">忘记密码？</button>
        </div>
      </div>
    </form>

  </div>
</div>
